---
title: Nuxt and Layers
---


::doc-component-demo
---
title: What is Nuxt?
---

Nuxt is a full-stack framework that combines Vue.js and Nitro to create universal applications.

With a few settings, you can swap from a full SSR application to a static application, or even a combination of both. Create full server applications as a replacement of `express` or `koa` for instance, or create a full stack application with a single framework, including fully typed code, optimized payload, and more.

It also has out-of-the-box support for a high number of pre configured providers, including Edge Worker, such as [Cloudflare Workers](https://nitro.unjs.io/deploy/providers/cloudflare), [Vercel](https://nitro.unjs.io/deploy/providers/vercel), [Netlify](https://nitro.unjs.io/deploy/providers/netlify), [Firebase](https://nitro.unjs.io/deploy/providers/firebase), and more.

---

Useful resources:

- [Visit nuxt.com](https://nuxt.com/)
- [Read introduction guide on nuxt.com](https://nuxt.com/docs/getting-started/introduction)
- [Read pages and layouts guide on nuxt.com](https://nuxt.com/docs/migration/pages-and-layouts)

#grid

  :::doc-grid-icon{name="simple-icons:vuedotjs" color="success" to="https://vuejs.org"}
  Vue.js

  #description
  Progressive JS Framework
  :::

  
  :::doc-grid-icon{name="simple-icons:vite" color="primary" to="https://vitejs.dev"}
  Vite

  #description
  Build Tool for Modern Development
  :::

  :::doc-grid-icon{name="carbon:chemistry" color="orange" to="https://nitro.unjs.io"}
  Nitro

  #description
  Universal web servers
  :::
::


::doc-component-demo
---
title: What is a Nuxt Layer?
---
A Nuxt application can grow very fast. You can be multiple developers working on the same application, or you can have multiple applications that share common features.

Layers is a mechanism that allows you to split your application into multiple directories, each with their own `nuxt.config.js` file. Each directory can be a full Nuxt application, with its own `pages`, `components`, `plugins`, and more. 

At the end, all layers are merged together, representing a single application.

In order to keep your application maintainable, you need to organize your code. We help you do that with Nuxt Layers. The code in Tairo does not interfere with your own code, has minimal dependencies, and all features are optional, meaning they won't be loaded if you don't actually use them.

You can also override any component, by creating a component with the same name in your application. This allows you to customize Tairo to your needs, without having to rewrite all the code.

---

Useful resources:

- [Learn more about Layers on nuxt.com](https://nuxt.com/docs/getting-started/layers)
::



::doc-component-demo
---
title: How Tairo uses Nuxt Layers
---
Tairo is a set of Nuxt layers that you can enable depending on your needs. 

This creates a Nuxt application that contains only what's actually used. Keep only the layers you need, and remove the ones you don't, so that your application is as light as possible. 

It also a great and efficient way for us to provide you with more features and updates, without taking the risk to break your application!


:doc-heading{label="Base layers"}


- **Shuriken UI**: `@shuriken-ui/nuxt`

  This layer provides base components for Tairo, such as buttons, inputs, and cards. It also loads Tailwind CSS, and provides a set of Tailwind CSS components that you can use to style your application.

- **Tairo Core** *(extends from Shuriken UI)*: `layers/tairo`  

  This layer is required to use Tairo. It provides features for main content in Tairo, such as table components, the panel system, the toaster system, and more.

- **Tairo Layout Sidebar**: `layers/layout-sidebar`   

  This layer provides a sidebar layout, with a sidebar and a content area. It also provides a sidebar menu component.

- **Tairo Layout Collapse**: `layers/layout-collapse`  

  This layer provides a collapse layout, with a collapse menu and a content area. It also provides a collapse menu component.


:doc-heading{label="Demo layers"}

- **Demo App**: `demo` 

  This layer is the demo app. It is used to show you how you can use Tairo, with concrete examples.

- **Documentation**: `layers/documentation` 

  This layer is an optional layer that you can enable to show the documentation. It uses [nuxt-content](https://content.nuxtjs.org/) to load the documentation from the markdown files.

- **Landing**: `layers/landing`

  This layer contains everyting related to Tairo's landing page. It mainly to demonstrates that you can, and should, split your application into multiple layers.


:doc-heading{label="App layers"}

- **Your app**: `app` 

  This layer is your app. It is the layer that you will use to create your application with Tairo. See it as a Tairo starter app with the bare bones.


:doc-heading{label="Enable layers"}

To enable a layer, you need to add it to the `extends` array in your `nuxt.config.js` file. 

In the example below, we load all the layers available in Tairo. *(example from the demo)*

```ts [demo/nuxt.config.js]
export default defineNuxtConfig({
  extends: [
    // features layers
    // set them first so they can override the base layers
    '../layers/documentation',
    '../layers/landing',

    // shared layers
    '../layers/tairo', // tairo extends @shuriken-ui/nuxt
    '../layers/tairo-layout-sidebar',
    '../layers/tairo-layout-collapse',
  ],

  // rest of your config ...
})
```
::

::doc-overview-layers
---
title: Visualizing layers
---
::

::doc-nav
---
prev: /documentation/setup
next: /documentation/setup/installation
---
::